import React, {Component} from "react";
import {
	Animated,
	Text,
	View,
} from "react-native";

//自定义一个动画组件；
class FadeInView extends Component {
	constructor(props) {
		super(props);
		this.state = {
			fadeAnim: new Animated.Value(0),
		};
	}
	componentDidMount() {
		Animated.timing(
			this.state.fadeAnim,
			{
				toValue: 1,
			}
		).start();
	}
	render() {
		return (
			<Animated.View style={{...this.props.style, opacity: this.state.fadeAnim,}}>
				{this.props.children}			
			</Animated.View>
		);
	}
}


//调用自定义的组件；

export default class MyAnimated extends Component {
	constructor(props) {
		super(props);
	}
	render() {
		return (
			<View>
				<FadeInView style={{width: gScreen.width, height: 150, backgroundColor: "powderblue"}}>
					<Text 
						style={{fontSize: 28, textAlign: "center", margin: 10}}
					>
						Fading in
					</Text>
				</FadeInView>

			</View>
		);
	}
}

